<template>
  <div style="display: flex; flex-direction: column;">
    <div class="tool" v-for="tool in tools" :key="tool.icon">
      <el-tooltip :content="tool.name" placement="right">
        <div @click="click(tool.name)" :class="`iconfont ${tool.icon}`" :style="`${'size' in tool?'font-size:' + tool.size + 'px;':''}`"/>
      </el-tooltip>
    </div>
    <input
        id="file-selector"
        ref="uploadInput"
        type="file"
        @change="uploadFile"
        accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        style="display: none"
    />
    <el-dialog v-model="centerDialogVisible" :show-close="false" width="50%" center style="border-radius: 12px;">
      <FileLib @close="centerDialogVisible=false" v-if="centerDialogVisible"/>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import mammoth from 'mammoth'
import { storeToRefs } from 'pinia'
import { useStore } from '../store/index.js'
import FileLib from './fileLib.vue'
const store = useStore()
const { addFile, fileHtml, newFileStatus, exportAsDocxStatus, fileName } = storeToRefs(store)

const uploadInput = ref(null)
const centerDialogVisible = ref(false)
const tools = ref([
  {
    name: '新建文档',
    icon: 'icon-zengjia'
  },
  {
    name: '导入word文件',
    icon: 'icon-daoru'
  },
  {
    name: '导出为word文件',
    icon: 'icon-daochu'
  },
  {
    name: '文件库',
    icon: 'icon-ic_wenjianjia',
    size: 28
  },
])
function click(name){
  switch (name){
    case '导入word文件':{
      uploadInput.value.click()
      break
    }
    case '导出为word文件':{
      exportAsDocxStatus.value = true
      break
    }
    case '新建文档':{
      newFileStatus.value = true
      fileName.value = '无标题'
      store.generateUniqueId()
      break
    }
    case '文件库':{
      centerDialogVisible.value = true
      break
    }
  }
}
function uploadFile(e){
  const file = e.target.files[0]
  if (file) {
    const loading = ElLoading.service({
      lock: true,
      text: '导入中',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    let fileReader = new FileReader();
    fileReader.onload = function(event) {
      let arrayBuffer = event.target.result;
      let options = {
        arrayBuffer: arrayBuffer
      };
      mammoth.extractRawText(options)
        .then(function() {
          return mammoth.convertToHtml(options);
        })
        .then(function(result) {
          let html = result.value;
          addFile.value = true
          fileHtml.value = html
          fileName.value = removeFileExtension(file.name)
          store.generateUniqueId()
        })
        .done();
    };
    fileReader.readAsArrayBuffer(file);
    loading.close()
  }
}
function removeFileExtension(fileName) {
  let lastIndex = fileName.lastIndexOf(".");
  if (lastIndex !== -1) {
    return fileName.substring(0, lastIndex);
  } else {
    return fileName;
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-dialog__header){
  display:none;
}
:deep(.el-dialog__body){
  padding: 0;
}
.tool{
  display: flex;
  align-content: center;
  justify-content: center;
  height: 50px;
  .iconfont{
    display: flex;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
  }
}
</style>
